<template>
  <layout title="emoty空白提示">
    <layout-content title="基础使用">
      <template v-for="(item, index) in EmptyModes" :key="index">
        <tn-empty show :mode="item"></tn-empty>
      </template>
    </layout-content>

    <layout-content title="自定义内容">
      <tn-empty show icon="sport-run" text="跑步中"></tn-empty>
      <tn-empty show icon="/static/images/empty/search.jpg" text="搜索结果为空"></tn-empty>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-empty show type="primary"></tn-empty>
      <tn-empty show type="success"></tn-empty>
      <tn-empty show type="warning"></tn-empty>
      <tn-empty show type="danger"></tn-empty>
      <tn-empty show type="info"></tn-empty>
      <tn-empty show icon-color="tn-color-blue" text-color="#01BEFF"></tn-empty>
    </layout-content>

    <layout-content title="设置大小">
      <tn-empty show icon-size="60" text-size="24"></tn-empty>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnEmpty from '@/tuniao-ui/components/tn-empty/src/Empty.vue'
import { EmptyModes } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>
</style>
